<script setup lang="ts">
import { ref, computed, watch } from "vue"
import BaseQuestion from "./base-question.vue"
import { $t } from '@vben/locales';

defineOptions({ name: 'Essay' })

const baseQuestionRef = ref()
// 接收父组件传入的数据
const props = defineProps<{
  modelValue: {
    stem: string
    stemImg: string
    stemImages: Array<any>
    answers: string
    analysis: string
    options: Array<any>
  }
}>()

// 向父组件发射数据更新事件
const emit = defineEmits<{
  'update:modelValue': [value: typeof props.modelValue]
}>()

const init = () => {
  // 初始化逻辑可以在这里添加
}

const validate = () => {
  const result = baseQuestionRef.value?.validate()
  if (!result.valid) {
    return Promise.reject(result.message)
  }
  // 针对问答题的特殊验证
  if (!props.modelValue.answers?.trim()) {
    return Promise.reject($t('questionBank.enterReferenceAnswer'))
  }
  return Promise.resolve(true)
}

const getData = async () => {
  try {
    const valid = await validate()
    if (!valid) return Promise.resolve()
    // 使用base-question的getData方法
    return await baseQuestionRef.value?.getData()
  } catch (error) {
    return Promise.resolve()
  }
}

defineExpose({
  init,
  getData,
  validate
})
</script>

<template>
  <BaseQuestion ref="baseQuestionRef" :modelValue="modelValue">
    <template #answers>
      <el-form-item :label="$t('questionBank.referenceAnswer')" prop="answers" class="w-[100%]">
        <el-input v-model="modelValue.answers" type="textarea" :rows="4" maxlength="500" show-word-limit />
      </el-form-item>
    </template>
  </BaseQuestion>
</template>
